This method is nothing more than a custom coded link in your post to Google Maps. Arguments in the URL in the link control what is displayed on the map. The downside of this method is that the map is outside of the your blog in a different browser window.
Simple Link Method
Open a new browser window to http://maps.google.com. Find the map location and scale you desire. Once you are happy with what you see, click the 'Link To This Page' command. That will update the URL on the address bar of the browser with the URL needed to reproduce the image you are seeing. Then copy the URL from the address bar and use it in your blog post. Simple as that.
Then when the user viewing the blog clicks the link, they will be taken to Google Map and shown the same map that you saw. For example: Copy this URL into a browser and see what it pulls up.
It should pull up a hybrid image of Santa Barbara at a scale of 500 feet/200 meters, and with a marker at 101 State Street.
Advanced Link Method
?ll=latitude,longitude. In decimal format. Anything over 6 decimal places is overkill.
You can use latitude and longitude to specify the map location. This is handy for when you do not have an address, especially outside of the US. All you need to do is pass the argument "LL" with the latitude and longitude as decimal values. Example "ll=36.605451,-121.892195".
&q=address string. Instead of a lat/long, you can use an address. Each word of the address must be separated by a plus (+) sign. It also creates a marker balloon pointing to your address. Example "q=101+State+St,+Santa+Barbara,+CA"
The ll and q arguments are mutually exclusive. The q argument will be ignored if you have the ll argument.
&z=zoom. The zoom value as integer ranging from 0 to about 20. A value of 0 shows the whole earth. 20 seems to be about as close as you can zoom in. I use 15 as a good value to start with. Example "z=15".
&t=type. Controls what type of map is displayed. Value is "m" for map, "k" for satellite , or "h" for hybrid. The default is "m".
&om=0 or 1. Controls the small map in the lower right corner. 0=hide, 1=show.
The arguments can appear in any order on the URL. But I recommend that you always start with LL. The first argument is always proceeded by a "?", and all following arguments are delineated with an ampersand (&). Hence, the reason I have the arguments coded as "?ll", "&z", and so on.
Example: The following URL uses the LL argument to focus on Monterey, California at the highest zoom scale, which is 1000 feet/200 meters. Monterey is at latitude 37' 30.1" North and longitude 122' 29.0" West. A simple minute/second conversion to decimal values translate those coordinates to latitude 36.605451 and longitude -121.892195 decimal values. It is a hybrid map (t=h) with the small map in the corner closed (om=0).
Better Map Window Control
Open maps in a separate window: You might want to consider a smoother method of showing the maps to the user. Rather than leave the blog page, it would be better to open the Google Map page in a separate browser window. This is easily done by adding the keyword "target" to the link HTML. By adding target="_new" to the tag it will instruct the browser to open the link in a new window. Try it by clicking this link. Notice that every time you click it, a new browser window is created. Here the HTML for this link.
Open all maps in a designated window: However, If you have multiple links, each with "target =_new" keyword in the tag, the each link will open a new window. This will leave the user with a lot of open windows hanging around that they will later have to manually close. A better method is to open all the maps into one designated window, separate from the blog's window. This is easily done by coding a window name into the target argument of the link tag. In this case, I've named the designated window "googlemaps".
Try it by clicking the following links: Monterey Harbor, Santa Barbara Harbor. Notice that no matter how many times you click either link, only one new browser window was created, but its content keeps changing. Here is the HTML for these links:
Bring The Map Window Into Focus:
The problem with the above technique is that when the user clicks on the link, the content of the Google Map window is updated, but the user may see or notice it. The best way to correct this is to instruct the browser to switch the focus to the map window when the user clicks on a link.
I use little javascript to make it easy. With this method, the map is opened in a different browser window, and the user focus is automatically switched to the map window. Also, every time the user clicks on the map link in your blog, they are sent to the same map window, which prevents the user from having multiple windows pop open in their computer.
To do this, put this javascript procedure in your Blogger template. Insert it right after the <head> tag near the top.
Then update your blog's template.
Next, within your blog post, code your links to Google Map with the javascript event tag "onclick" to call the above procedure that you have embedded in the template. For example:
The argument passed to the procedure Google_Map is the URL of the map you which to display. In this example, the URL asks for maps to 3 different harbors. The HREF points to a null value so the browser ignores it. Go ahead and try it
Below is the HTML for the above links:
2 comments:
Hmmmmm, no comments, and I reckon this is a great tip!! Thanks.
muy útil, gran aporte!!
Post a Comment